<template>
    <div class="list">
        <div class="content">
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 搜索框 -->
            <div class="list_input">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select" @input="a()">
                    <el-button slot="append" icon="el-icon-search" @click="search(input)"></el-button>
                </el-input>
                <el-button type="success" plain class="add" @click="add">添加用户</el-button>
            </div>
            <!-- 表格 -->
            <el-table ref="singleTable" :data="tableData" highlight-current-row style="width:100%;padding-top:12px;">
              <el-table-column type="index" width="100"></el-table-column>
              <el-table-column property="username" label="姓名"></el-table-column>
              <el-table-column property="email" label="邮箱"></el-table-column>
              <el-table-column property="mobile" label="电话"></el-table-column>
              <el-table-column label="日期">
                  <template slot-scope="scope">
                    <div>{{scope.row.create_time | time1}}</div>
                  </template>
              </el-table-column>
              <el-table-column label="用户">
                  <template slot-scope="scope">
                    <div>
                      <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="change(scope.row.id,scope.row.mg_state)"></el-switch>
                    </div>
                  </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div>
                      <el-button type="primary" icon="el-icon-edit" circle @click="dialogFormVisiblea(scope.row)"></el-button>
                      <el-button type="danger" icon="el-icon-delete" circle @click="deler()"></el-button>
                      <el-button type="success" icon="el-icon-check" circle></el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                ></el-pagination>
            </div>
            <!-- 点击弹出add -->
            <add v-show="panelShow" :panelShow="false" v-on:success="success">></add>


            <!-- 编辑弹框 -->
            <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="form.name" auto-complete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                  <el-input v-model="form.email" auto-complete="off" @blur="aaa()"></el-input>
                </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                      <el-input v-model="form.mobile" auto-complete="off" @blur="bbb(500)"></el-input>
                    </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
          </el-dialog>
        </div>
    </div>
</template>

<script>
import { list, modification, seachlist, del, amend } from "../api/api.js";
import add from "../components/Add";
export default {
  data() {
    return {
      tableData: [],
      currentRow: null,
      value: true,
      currentPage4: 1,
      panelShow: false,
      pagenum: "1",
      total: 0,
      pagesize: 2,
      input: "",
      id: "",
      username: "",
      dialogFormVisible: false,
      form: {
        name: "",
        email: "",
        mobile: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        newValueemail:"",
        newValuemobile:""
      },
      formLabelWidth: "120px",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      }
    };
  },
    components: {
        add
    },
  watch: {
    form: {
      handler(newValue, oldValue) {
         console.log("新",newValue); 
          this.newValue=newValue;
        console.log("旧",oldValue);
      }
    },
    deep: true
  },
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.list();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.list();
    },
    add() {
      this.panelShow = true;
    },
    success(res) {
      if (res === true) {
        this.panelShow = false;
        this.list();
      } else if (res === false) {
        this.panelShow = false;
      }
    },
    //列表
    list(query) {
      list({
        query: query,
        pagenum: this.currentPage4,
        pagesize: this.pagesize
      }).then(res => {
        if (res.status == 200) {
          console.log("用户列表", res);
          this.tableData = res.data.data.users;
          this.pagenum = res.data.data.pagenum;
          this.total = res.data.data.total;
        }
      });
    },
    change(uId, type) {
      console.log(typeof uId);
      modification({
        uId: uId,
        type: type
      }).then(res => {
        console.log("修改用户的状态", res);
      });
    },
    a() {
      console.log(this.input);
    },
    seach(val) {
      this.list(val);
    },
    deler() {
      var id;
      for (var i = 0; i < this.tableData.length; i++) {
        id = this.tableData[i].id;
      }
      del({
        id: id
      }).then(res => {
        console.log("删除", res);
        this.list();
      });
    },
    dialogFormVisiblea(row) {
      this.dialogFormVisible = true,
      this.form = {
          name: row.username,
          email: row.email,
          mobile: row.mobile
      };
    },
    aaa(){
      this.newValueemail=this.form.email;  
    },
    bbb(id){
      console.log(this.newValueemail);
      this.newValuemobile=this.form.mobile;
         amend({
           id:id,
           email: this.newValueemail,
           mobile: this.newValuemobile
         }).then(res => {
           console.log("编辑", res);
           this.list();
         })
    }
  },
  filters: {
    time1: function(val) {
      var now = new Date(val);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var data = now.getDate();
      return (
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (data < 10 ? "0" + data : data)
      );
    }
  },
  created() {
    this.list();
  }
};
</script>


<style scoped lang="scss">
    .list{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        position: relative;
        .content{
                    width:97%;
                    height:95%;
                    .list_input{
                        margin-top:12px;
                        .el-input{
                            width:360px;
                        }
                     }
                }
                
    }
</style>